<template>
  <div class="form-end">
    <je-form
      :model="properties"
      :colon="false"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      autocomplete="off"
      size="small"
    >
      <je-collapse v-model:activeKey="activeKey" expand-icon-position="right">
        <je-collapse-panel key="1" :header="$t('formEnd.header')">
          <je-form-item :label="$t('formEnd.name')" name="name">
            <je-input v-model:value.trim="properties.name" @change="onNameChange" />
          </je-form-item>
          <je-form-item :label="$t('formEnd.resourceId')" name="id">
            <je-select v-model:value="stencil.id" disabled config-info="JE_WF_TASKTYPE,id,code,S" />
          </je-form-item>
          <!-- <je-form-item :label="$t('formEnd.formSchemeName')" name="formSchemeName">
            <je-select v-model:value="properties.formSchemeName" disabled :options="[]" />
          </je-form-item> -->
        </je-collapse-panel>
        <je-collapse-panel key="2" :header="$t('formEnd.formControl')" class="formcontrol-panel">
          <FormControl
            :form-config="formConfig"
            :func-info="funcInfo"
            :node-id="nodeData.resourceId"
          />
        </je-collapse-panel>
      </je-collapse>
    </je-form>
  </div>
</template>

<script>
  import { defineComponent, reactive, ref, watch } from 'vue';
  import { Collapse, Form, Input, Select } from '@jecloud/ui';

  import FormControl from '@/components/form-control/index.vue';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'FormEnd',
    components: {
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeSelect: Select,
      FormControl,
    },
    props: {
      nodeData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      funcInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      wfEditor: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      //表单数据
      const properties = ref(props.nodeData.properties);
      const formConfig = ref(props.nodeData.formConfig);
      const stencil = ref(props.nodeData.stencil);

      //默认激活的面板
      const activeKey = ref(['1', '2']);

      //字段校验规则
      const rulesRef = reactive({});
      const { validate, validateInfos } = useForm(properties, rulesRef, {
        onValidate: (...args) => {},
      });

      //名称字段change事件
      const onNameChange = () => {
        props.wfEditor.updateNodeLabel({ label: properties.value.name });
      };

      //监听节点Id刷新数据
      watch(
        () => props.nodeData.resourceId,
        () => {
          properties.value = props.nodeData.properties;
          formConfig.value = props.nodeData.formConfig;
          stencil.value = props.nodeData.stencil;
        },
      );

      return {
        activeKey,
        properties,
        labelCol: {
          span: 5,
        },
        wrapperCol: {
          span: 19,
        },
        validateInfos,
        validate,
        formConfig,
        stencil,
        onNameChange,
      };
    },
  });
</script>
<style lang="less" scoped>
  .form-end {
    height: 100%;
    overflow-x: hidden !important;
  }
</style>

<style lang="less">
  .form-end {
    .formcontrol-panel {
      .ant-collapse-content > .ant-collapse-content-box {
        padding: 0px;
      }
    }
  }
</style>
